<template>
    <div v-if="isShow" class="bt-dashed renter-co-wrap">
        <!-- <Row>
            <Col span="24"> -->
                <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                     <!-- label-position="right" :label-width="90" -->
                    <FormItem label="同租人："></FormItem>
                    <FormItem prop="name" >
                        <Input type="text" v-model="formInline.name" placeholder="同租人姓名" :readonly="isSaved"></Input>
                    </FormItem>
                    <FormItem prop="phone">
                        <Input type="text" v-model="formInline.phone" placeholder="同租人手机" :readonly="isSaved"></Input>
                    </FormItem>
                    <FormItem prop="id_card">
                        <Input type="text" v-model="formInline.id_card" placeholder="同租人身份证" :readonly="isSaved"></Input>
                    </FormItem>
                    <FormItem prop="relation">
                        <Select v-model="formInline.relation" style="width: 100px;" :disabled="isSaved">
                            <Option v-for="item in relations" :value="item.value" :key="item.value">{{ item.text }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem style="float:right;">
                        <Button type="ghost" @click="handleSubmit('formInline')" v-if="!isSaved">保存</Button>
                        <Button type="ghost" @click="handleCancel('formInline')" v-if="!isSaved">取消</Button>
                        <!-- <Button type="success" @click="handleEdit('formInline')" v-if="isSaved">修改</Button>
                        <Button type="warning" @click="handleCancel('formInline')" v-if="isSaved">删除</Button> -->
                    </FormItem>
                </Form>
            <!-- </Col>
        </Row> -->
    </div>
</template>

<script>
// import util from '@/libs/util';
import validate from '@/libs/validate'
import { CoRenterRelations } from '@/libs/const'
import { http, api } from '@/libs/http'

export default {
  props: {
    leaseId: {
      required: true
    }
  },
  data () {
    return {
      isSaved: false, // 是否已保存
      isShow: true,
      relations: CoRenterRelations.properties,
      formInline: {
        name: '',
        phone: '',
        id_card: '',
        relation: '亲属'
      },
      ruleInline: {
        name: [
          {
            required: true,
            message: '请输入租客姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入租客手机号',
            trigger: 'blur'
          },
          { validator: validate.validPhone }
        ],
        id_card: [
          // {
          //     required: true,
          //     message: '请输入身份证号码',
          //     trigger: 'blur'
          // },
          { validator: validate.validIDCard }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let params = this.formInline
          if (!params.id_card) {
            delete params.id_card
          }
          http.request(
            this,
            api.tenant_co_add,
            [this.leaseId],
            { co_tenants: [params] },
            res => {
              // 父组件刷新同租人信息
              this.$emit('refresh')
              this.isShow = false
            }
          )
        } else {
          // this.$Message.error('请填写正确的同租人信息!');
        }
      })
    },
    // handleEdit(name) {
    //     this.isSaved = false;
    // },
    handleCancel (name) {
      this.isShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.renter-co-wrap{
    padding-top: 20px;
}
</style>
